<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

</head>
<style>
    * {
        margin: 0;
        padding: 0;
        font-family: "Poppins", sans-serif;
    }
    
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #516977;
    }
    
    .container {
        position: relative;
        height: 600px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 30px;
    }
    
    .container h1 {
        color: white;
        font-size: 60px;
    }
    
    .container .card {
        margin-top: 100px;
        position: relative;
        max-width: 300px;
        height: 215px;
        background: #fff;
        margin: 30px 10px;
        padding: 20px 15px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 5px 202px rgba(0, 0, 0, 0.5);
        transition: .3s ease-in-out;
    }
    
    .container .card:hover {
        height: 420px;
    }
    
    .container .card .imgBx {
        position: relative;
        width: 260px;
        height: 260px;
        top: -60px;
        left: 20px;
        z-index: 1;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    }
    
    .container .card .imgBx img {
        max-width: 100%;
        border-radius: 4px;
    }
    
    .container .card .content {
        position: relative;
        margin-top: -140px;
        padding: 10px 15px;
        text-align: center;
        color: #111;
        visibility: hidden;
        opacity: 0;
        transition: .3s ease-in-out;
    }
    
    .container .card:hover .content {
        visibility: visible;
        opacity: 1;
        margin-top: -40px;
        transition-delay: .3s;
    }
</style>

<body>

    <div class="container">
        <div class="card">
            <div class="imgBx">
                <img src="画册1.jpg" alt="">
            </div>
            <div class="content">
                <h2>超现实主义</h2>
                <p>超现实主义是一种现代西方文艺流派。致力于探索人类的潜意识心理，主张突破合乎逻辑与实际的现实观，彻底放弃以逻辑和有序经验记忆为基础的现实形象，将现实观念与本能、潜意识及梦的经验相融合展现人类深层心理中的形象世界。
                </p>
            </div>
        </div>
        <div class="card">
            <div class="imgBx">
                <img src="画册2.jpg" alt="">
            </div>
            <div class="content">
                <h2>超现实主义绘画</h2>
                <p>
                    弗罗伊德以梦的解释开创了精神分析的新时代，受其影响，在1922年前后，在达达派艺术内部，产生了超现实主义，对整个欧美影响巨大的现代画派。超现实主义画家强调梦幻与现实的统一才是绝对的真实，因此，力图把生与死，梦境与现实统一起来，具有神秘、恐怖、怪诞等特点。
                </p>
            </div>
        </div>
        <div class="card">
            <div class="imgBx">
                <img src="画册3.jpg" alt="">
            </div>
            <div class="content">
                <h2>超现实主义摄影</h2>
                <p>
                    超现实主义摄影作品是很难用文字来诠释的，因为这类作品不是现实经验的记录，要用大家的共同经验去对超现实主义摄影作品作一番评论是一件很吃力的事，也只能从它的句法及主张中去对超现实主义摄影作一可能是牵强附会的理解。
                </p>
            </div>
        </div>

        <div class="card">
            <div class="imgBx">
                <img src="画册5.jpg" alt="">
            </div>
            <div class="content">
                <h2>超现实主义拼贴</h2>
                <p>
                    超现实主义强调梦幻与现实的统一才是绝对的真实,这种风格的作品力图把生与死、梦境与现实统一起来,热衷于没有任何逻辑联系和理性约束的表现手法,常常把毫不相干的东西凑在一起,以求脱离现实的残酷与悲哀。
                </p>
            </div>
        </div>
        <h1>Super-Realism</h1>
    </div>
</body>

</html>